<template>
  <div>
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-1">
      <el-form-item label="基本信息" class="one-label">
        <el-form-item label="商品名称：" label-width="170px" prop="title">
          <div class="flex long-input">
            <el-input v-model="form.title" class="long-input-2" placeholder="请输入商品名称" maxlength="100" show-word-limit
              style="width: 79%" />
            <el-input v-model="form.unit" class="short-input" placeholder="单位，如：个/件/包" style="margin-left:10px" />
          </div>
        </el-form-item>
        <el-form-item label="商品货号：" label-width="170px" prop="goodsArticleNo">
          <div class="flex long-input">
            <el-input v-model="form.goodsArticleNo" class="long-input-2" placeholder="请输入商品货号" maxlength="100"
              show-word-limit />
          </div>
        </el-form-item>
        <el-form-item v-if="form.skuFlag =='0'" label="商品条形码：" label-width="170px" prop="goodsBarCode">
          <div class="flex long-input">
            <el-input v-model="form.goodsBarCode" class="long-input-2" placeholder="请输入商品条形码" maxlength="100"
              show-word-limit />
          </div>
        </el-form-item>
        <el-form-item label="商品卖点：" label-width="170px" prop="sellPoint">
          <div class="flex long-input">
            <el-input v-model="form.sellPoint" type="textarea" :rows="3" class="long-input-2" placeholder=""
              maxlength="50" show-word-limit />
          </div>
          <div>
            <span style="font-size: 14px; color: #7f7f7f">用于在云店商品详情中显示的卖点介绍，字数不超过50字</span>
          </div>
        </el-form-item>
        <el-form-item label="分享文案：" label-width="170px" prop="shareCopy">
          <div class="flex long-input">
            <el-input v-model="form.shareCopy" type="textarea" :rows="3" class="long-input-2" placeholder=""
              maxlength="150" show-word-limit />
          </div>
        </el-form-item>
        <el-form-item label="商品图片：" label-width="170px">
          <div><span class="font-red">* </span>商品主图</div>
          <div class="flex pro-p-minheight">
            <draggable id="content-box flex-item" v-model="form.goodsImages" dragable="true" :move="getdata"
              @update="datadragEnd">
              <template v-for="(item, key) in form.goodsImages">
                <div class="pic-bar mar-r-30 flex-item" :key="key" @mouseover.stop="itemOver(key)"
                  @mouseout.stop="itemOut(-1)">
                  <div @click="deleteImgages(item,key)">
                    <svg-icon icon-class="close" :class="{'active':key==curIndex || key==curHover}"
                      class="close-icon font-16 noraml-hide" />
                  </div>
                  <img class="picture" :src="item.imageUrl+ '?imageView2/1/w/200/h/200/q/100'" />
                </div>
              </template>
            </draggable>
            <el-upload v-if="form.goodsImages.length<5" list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" name="files" multiple :data="token"
              :show-file-list="false" v-loading="fileLoading" :limit='5' :on-exceed="handleExceed"
              :on-success="handleUploadSuccess" :before-upload="beforeUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="tips mar-t-3">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传5张（若导入商品图片数量超过5张则在小程序内只显示前5张图片）</div>
        </el-form-item>

        <el-form-item label="单列大图：" label-width="170px">
          <div class="flex height-148 upload-remove-bar">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" name="files" multiple :data="token"
              :show-file-list="false" v-loading="picFileLoading" :on-success="handleUploadPicUrlSuccess"
              :before-upload="beforePicUrlUpload">

              <img v-if="form.picUrl" :src="form.picUrl+ '?imageView2/1/w/200/h/200/q/100'"
                style="width: 150px;height: 150px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('picUrl')">
              <svg-icon v-if="form.picUrl" icon-class="close" class="icon font-16 noraml-hide active" />
            </div>
          </div>
          <div class="tips mar-t-3">建议尺寸：750*410像素，最多上传1张（用于店铺装修单列大图的商品组）</div>
        </el-form-item>

        <el-form-item label="分享图片：" label-width="170px">
          <div class="flex height-148 upload-remove-bar">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" name="files" multiple :data="token"
              :show-file-list="false" v-loading="shareFileLoading" :on-success="handleUploadShareImageUrlSuccess"
              :before-upload="beforeShareImageUrlUpload">

              <img v-if="form.shareImageUrl" :src="form.shareImageUrl+ '?imageView2/1/w/200/h/200/q/100'"
                style="width: 150px;height: 150px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('shareImageUrl')">
              <svg-icon v-if="form.shareImageUrl" icon-class="close" class="icon font-16 noraml-hide active" />
            </div>
          </div>
          <div class="tips mar-t-3">建议尺寸：750*750像素</div>
        </el-form-item>

        <el-form-item label="海报图片：" label-width="170px">
          <div class="flex height-148">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" name="files" :data="token" :show-file-list="false"
              :limit="1" v-loading="posterFileLoading" :on-success="handleUploadPosterImageUrlSuccess"
              :before-upload="beforePosterImageUrlUpload">

              <img v-if="form.posterImageUrl" :src="form.posterImageUrl+ '?imageView2/1/w/200/h/200/q/100'"
                style="width: 150px;height: 150px">

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="close-icon width-36 height-36 flex flex-center cursor-p" @click="closeEls('posterImageUrl')">
              <svg-icon v-if="form.posterImageUrl" icon-class="close" class="icon font-16 noraml-hide active" />
            </div>
          </div>
          <div class="tips mar-t-3">建议尺寸：750*1067像素&nbsp;&nbsp;
          </div>
        </el-form-item>
        <el-form-item label="跨境类型：" label-width="170px" prop="crossBorderType" v-if="enterpriseConfig.crossBorderBusinessFlag === 1">
          <el-radio-group v-model="form.crossBorderType" @change="selectCrossBorderType"
            :disabled="form.isDisabledSelCrossBorderType === 1 ? true : false">
            <template v-for="(val, key) in dict.crossBorderType">
              <el-radio :label="key" :key="key">{{ val }}</el-radio>
            </template>
          </el-radio-group>
          <div class="tips mar-b-5">跨境商品不支持选品小程序以及抖音、快手、淘宝平台</div>
          <div v-if="form.crossBorderType === '2'">
            <span>海关商品编码(HS)：</span>
            <el-select v-model="form.customsGoodsCodeId" filterable placeholder="请选择"
              :disabled="form.isDisabledSelCrossBorderType === 1 ? true : false">
              <el-option v-for="item in customsGoodsCodeData" :key="item.codeId" :label="item.code"
                :value="item.codeId">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="商品品牌：" label-width="170px">
          <el-select v-model="form.brandId" placeholder="请选择">
            <el-option v-for="item in listBrands" :key="item.brandId" :label="item.brandName" :value="item.brandId">
            </el-option>
          </el-select>
        </el-form-item>

        <div>
          <!-- 校验系统参数category_separate是否进行类目分类 -->
          <!-- 直接定义两组类目数组提供使用 -->
          <div v-if="!enterpriseConfig.categorySeparate">
            <el-form-item label="零售商品分类：" label-width="170px" prop="goodscategoryIds">
              <el-cascader v-model="form.goodscategoryIds" @change="categoryChange" placeholder="选择商品分类"
                :options="categoryData" class="default-input" :props="{ checkStrictly: true }" change-on-select
                filterable></el-cascader>
              <div class="tips mar-t-3">选择商品用于企业零售销售的分类</div>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="零售商品分类：" label-width="170px" prop="goodscategoryIds">
              <el-cascader v-model="form.goodscategoryIds" @change="categoryChange" placeholder="选择商品分类"
                :options="categoryData" class="default-input" :props="{ checkStrictly: true }" change-on-select
                filterable></el-cascader>
              <div v-if="showEditButton" class="tips mar-t-3">选择商品用于企业零售销售的分类</div>
            </el-form-item>
            <!-- 判断是否使用别名-->
            <div v-if="!enterpriseConfig.wholesaleCategoryAlias">
              <el-form-item label="批发商品分类：" label-width="170px" prop="wholesaleGoodscategoryIds">
                <el-cascader v-model="form.wholesaleGoodscategoryIds" @change="categoryChange" placeholder="选择商品分类"
                  :options="categoryData" class="default-input" :props="{ checkStrictly: true }" change-on-select
                  filterable></el-cascader>
                <div v-if="showEditButton" class="tips mar-t-3">选择商品用于企业批发销售的分类</div>
              </el-form-item>
            </div>
            <div v-else>
              <!-- 使用别名 -->
              <el-form-item label="批发商品分类：" label-width="170px" prop="wholesaleGoodscategoryIds">
                <el-cascader v-model="form.wholesaleGoodscategoryIds" @change="categoryChange" placeholder="选择商品分类"
                  :options="wholesaleCategoryData" class="default-input" :props="{ checkStrictly: true }"
                  change-on-select filterable></el-cascader>
                <div class="tips mar-t-3">选择商品用于企业批发销售的分类</div>
              </el-form-item>
            </div>
          </div>
        </div>

      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import {
    listGoodsCategory,
    listWholesaleGoodsCategory
  } from '@/api/goods/goods'
  import {
    listBrand
  } from '@/api/user/enterpriseBrand'
  import {
    getToken
  } from '@/utils/auth'
  import draggable from 'vuedraggable'
  import GoodsCategory from '@/views/goods/goods-category'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    getCustomsGoodsCodeList
  } from '@/api/goods/customsGoodsCode'
  export default {
    components: {
      draggable,
      GoodsCategory
    },
    directives: {},
    props: {
      dict: {
        type: Object
      },
      showEditButton: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        curIndex: -1,
        curHover: -1,
        token: '',
        listBrands: [],
        form: {
          skuFlag: '0',
          title: '', // 标题
          goodsArticleNo: '', // 商品货号
          goodsBarCode: '', // 商品条形码
          sellPoint: '', // 商品卖点
          shareCopy: '',
          unit: '件', // 单位
          goodsImages: [],
          shareImageUrl: '',
          picUrl: '',
          posterImageUrl: '',
          // 商品分类
          goodscategoryIds: [],
          // 批发商品分类
          wholesaleGoodscategoryIds: [],
          // 跨境类型
          crossBorderType: '1',
          // 海关商品编码id
          customsGoodsCodeId: '',
          // 是否禁用选择跨境类型：0-false，1-true
          isDisabledSelCrossBorderType: 0
        },
        // 系统参数
        enterpriseConfig: {
          categorySeparate: '0',
          wholesaleCategoryAlias: '0',
          // 增值功能跨境业务
          crossBorderBusinessFlag: 0
        },
        categoryId: '',
        enterpriseId: this.getEnterpriseId(),
        fileLoading: false,
        shareFileLoading: false,
        picFileLoading: false,
        posterFileLoading: false,
        // 商品的所有分类json
        categoryData: [],
        // 批发商品类目
        wholesaleCategoryData: [],
        rules: {
          title: [{
            max: 100,
            message: '商品名称最多输入 100 个字符'
          },
          {
            required: true,
            message: '请填写商品名称',
            trigger: 'blur'
          }
          ],
          sellPoint: [{
            max: 50,
            message: '商品卖点最多输入 50 个字符'
          }],
          shareCopy: [{
            max: 150,
            message: '分享文案最多输入 150 个字符'
          }],
          unit: [{
            max: 6,
            message: '单位最多输入 6 个字符'
          },
          {
            required: true,
            message: '请填写单位',
            trigger: 'blur'
          }
          ],
          goodscategoryIds: [{
            required: false,
            message: '请选择商品分类',
            trigger: 'change'
          }],
          wholesaleGoodscategoryIds: [{
            required: false,
            message: '请选择批发分类',
            trigger: 'change'
          }],
          crossBorderType: [{
            required: true,
            message: '请选择跨境类型',
            trigger: 'change'
          }]
        },
        // 海关商品编码
        customsGoodsCodeData: []
      }
    },
    // 初始化页面
    created() {
      this.token = {
        accessToken: getToken()
      }
      this.initEnterpriseConfig()
      this.listBrand()
      this.listGoodsCategory()
      this.listWholesaleGoodsCategory()
      this.listCustomsGoodsCode()
      this.initGoodsEdit()
    },
    methods: {
      closeEls(item) {
        if (item === 'picUrl') {
          this.form.picUrl = ''
        }
        if (item === 'shareImageUrl') {
          this.form.shareImageUrl = ''
        }
        if (item === 'posterImageUrl') {
          this.form.posterImageUrl = ''
        }
      },
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.skuFlag = that.$utils.isExist(data.skuFlag) ? data.skuFlag : '0'
          that.form.title = that.$utils.isExist(data.title) ? data.title : ''
          that.form.goodsArticleNo = that.$utils.isExist(data.goodsArticleNo) ? data.goodsArticleNo : ''
          that.form.goodsBarCode = that.$utils.isExist(data.goodsBarCode) ? data.goodsBarCode : ''
          that.form.sellPoint = that.$utils.isExist(data.sellPoint) ? data.sellPoint : ''
          that.form.shareCopy = that.$utils.isExist(data.shareCopy) ? data.shareCopy : ''
          that.form.unit = that.$utils.isExist(data.unit) ? data.unit : ''
          that.$set(that.form, 'brandId', that.$utils.isExist(data.brandId) ? data.brandId + '' : '')
          that.form.shareImageUrl = that.$utils.isExist(data.shareImageUrl) ? data.shareImageUrl + '' : ''
          that.form.picUrl = that.$utils.isExist(data.picUrl) ? data.picUrl + '' : ''
          that.form.posterImageUrl = that.$utils.isExist(data.posterImageUrl) ? data.posterImageUrl + '' : ''
          that.form.goodsImages = that.$utils.isExist(data.goodsImages) ? data.goodsImages : ''
          const oneCategoryId = that.$utils.isExist(data.oneCategoryId) ? data.oneCategoryId : ''
          const twoCategoryId = that.$utils.isExist(data.twoCategoryId) ? data.twoCategoryId : ''
          const threeCategoryId = that.$utils.isExist(data.threeCategoryId) ? data.threeCategoryId : ''
          const wholesaleOneCategoryId = that.$utils.isExist(data.wholesaleOneCategoryId) ? data
            .wholesaleOneCategoryId : ''
          const wholesaleTwoCategoryId = that.$utils.isExist(data.wholesaleTwoCategoryId) ? data
            .wholesaleTwoCategoryId : ''
          const wholesaleThreeCategoryId = that.$utils.isExist(data.wholesaleThreeCategoryId) ? data
            .wholesaleThreeCategoryId : ''
          var arr = [] // 创建一个空数组 零售商品类目
          var wholesaleArr = [] // 批发商品类目数组
          if (that.$utils.isExist(oneCategoryId)) {
            arr.push(oneCategoryId)
          }
          if (that.$utils.isExist(twoCategoryId)) {
            arr.push(twoCategoryId)
          }
          if (that.$utils.isExist(threeCategoryId)) {
            arr.push(threeCategoryId)
          }
          // 批发类目
          if (that.$utils.isExist(wholesaleOneCategoryId)) {
            wholesaleArr.push(wholesaleOneCategoryId)
          }
          if (that.$utils.isExist(wholesaleTwoCategoryId)) {
            wholesaleArr.push(wholesaleTwoCategoryId)
          }
          if (that.$utils.isExist(wholesaleThreeCategoryId)) {
            wholesaleArr.push(wholesaleThreeCategoryId)
          }
          that.form.goodscategoryIds = arr
          that.form.wholesaleGoodscategoryIds = wholesaleArr
          // 跨境类型
          that.form.crossBorderType = that.$utils.isExist(data.crossBorderType) ? data
            .crossBorderType.toString() : '1'
          that.form.customsGoodsCodeId = data.customsGoodsCodeId
          that.form.countryId = that.$utils.isExist(data.countryId) ? data.countryId : ''
          // 跨境类型是否禁止编辑
          that.form.isDisabledSelCrossBorderType = that.$utils.isExist(data.isDisabledSelCrossBorderType) ? data
            .isDisabledSelCrossBorderType : 0
          that.selectCrossBorderType(that.form.crossBorderType)
        })
      },
      categoryChange() {
        this.categoryId = this.form.goodscategoryIds[this.form.goodscategoryIds.length - 1]
        this.$bus.$emit('goods.edit.categoryId', this.categoryId)
        this.wholesaleCategoryId = this.form.wholesaleGoodscategoryIds[this.form.wholesaleGoodscategoryIds.length - 1]
        this.$bus.$emit('goods.edit.wholesaleCategoryId', this.wholesaleCategoryId)
      },
      // 删除图片
      deleteImgages(item, key) {
        const goodsImages = this.form.goodsImages
        goodsImages.splice(key, 1)
        this.form.goodsImages = goodsImages
        this.setMainImageFlag()
      },
      // 设置主图
      setMainImageFlag() {
        const goodsImages = this.form.goodsImages
        goodsImages.forEach((item, index) => {
          if (index === 0) {
            item.mainImageFlag = 1
          } else {
            item.mainImageFlag = 0
          }
        })
        this.form.goodsImages = goodsImages
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.enterpriseId
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取批发商品类目
      listWholesaleGoodsCategory() {
        const enterpriseId = this.enterpriseId
        listWholesaleGoodsCategory(enterpriseId).then(response => {
          this.wholesaleCategoryData = response.data
        })
      },
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      checkForm() {
        const goodscategoryIds = this.form.goodscategoryIds
        const wholesaleGoodscategoryIds = this.form.wholesaleGoodscategoryIds
        // 需要校验的集合
        const checkArrays = []
        checkArrays.push('title')
        checkArrays.push('sellPoint')
        checkArrays.push('shareCopy')
        this.$refs.form.clearValidate()
        let ret = true
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            this.$message.error(valid)
            ret = false
            return false
          }
        })

        if (!ret) {
          return false
        }

        if (!this.form.unit) {
          this.$message({
            type: 'error',
            message: '商品单位不能为空'
          })
          return false
        }

        if (goodscategoryIds.length === 0 && wholesaleGoodscategoryIds.length === 0) {
          this.$message({
            type: 'error',
            message: '零售商品分类和批发商品分类，必须选择一个!'
          })
          return false
        }
        if (this.form.sellPoint !== '' && this.form.sellPoint.length > 50) {
          this.$message({
            type: 'error',
            message: '商品卖点不能超过50个字!'
          })
          return false
        }
        if (this.form.shareCopy !== '' && this.form.shareCopy.length > 150) {
          this.$message({
            type: 'error',
            message: '商品卖点不能超过150个字!'
          })
          return false
        }
        if (this.enterpriseConfig.crossBorderBusinessFlag === 1) {
          if (this.form.crossBorderType === '2') {
            if (!this.form.customsGoodsCodeId) {
              this.$message({
                type: 'error',
                message: '请选择海关商品编码!'
              })
              return false
            }
          }
        }
        return true
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      // 文件超出个数限制时的钩子
      handleExceed(file, fileList) {
        this.$message.warning('最多只能上传5张主图')
      },
      handleUploadSuccess(res, file) {
        if (this.form.goodsImages.length > 5) {
          this.$message({
            type: 'error',
            message: '最多只能上传5张主图'
          })
          return false
        }
        this.fileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          const goodsImages = this.form.goodsImages
          var obj = {
            imageUrl: imageUrl,
            mainImageFlag: 0
          }
          goodsImages.push(obj)
          this.form.goodsImages = goodsImages
          this.setMainImageFlag()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      beforeShareImageUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.shareFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      beforePicUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.picFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadShareImageUrlSuccess(res, file) {
        this.shareFileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          this.form.shareImageUrl = imageUrl
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      handleUploadPicUrlSuccess(res, file) {
        this.picFileLoading = false
        if (res.code === 101) {
          const imageUrl = res.data[0]
          this.form.picUrl = imageUrl
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      beforePosterImageUrlUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.posterFileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadPosterImageUrlSuccess(res, file) {
        this.posterFileLoading = false
        if (res.code === 101) {
          this.form.posterImageUrl = res.data[0]
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.form.goodsImages
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.form.goodsImages = filters
      },
      itemOver(index) {
        this.curHover = index
      },
      itemOut(index) {
        this.curHover = index
      },
      // 获取系统参数
      initEnterpriseConfig() {
        getByEnterpriseId(this.enterpriseId).then((response) => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      // 获取海关商品编码列表
      listCustomsGoodsCode() {
        const query = {
          enterpriseId: this.getEnterpriseId()
        }
        getCustomsGoodsCodeList(query).then(response => {
          if (response.isError) return
          this.customsGoodsCodeData = response.data
        })
      },
      // 选择跨境类型
      selectCrossBorderType(item) {
        const that = this
        that.$bus.$emit('crossBorderType', that.form.crossBorderType)
      }
    }
  }
</script>

<style lang="less" scoped>
  .pro-p-minheight {
    min-height: 148px;
  }

  .noraml-hide {
    display: none !important;
  }

  .active {
    display: block !important;
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    min-width: 55%;
    // margin-right: 10px;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 50%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 148px;
    height: 148px;
    display: block;
  }

  .pic-bar {
    position: relative;
    display: inline-block;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .el-dialog-div {
    height: 70vh;
    overflow: auto;
  }
</style>
